<template>
	<view class="page">
		<view class="item d_flex_b">
			<view class="name">
				<input v-model="nikeName" maxlength="10" type="text" @blur="updateMsg" placeholder="请输入昵称">
			</view>
			<image v-if="nikeName.length>0" @click="deleteName" src="/static/close.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nikeName:'',
			};
		},
		onLoad({nickName}) {
			this.nikeName=nickName;
		},
		methods:{
			deleteName(){
				this.nikeName='';
			},
			updateMsg(){
				if(!this.nikeName){
					uni.showToast({
						title: '请输入昵称',
						icon:'none'
					});
					return;
				}
        if (this.nikeName.length > 10) {
          uni.showToast({
            title: `不能超过10个字符`,
            icon: 'none',
            duration: 3000,
          })
          return
        }
				this.$http.post('/api/user/update',{
					nickName:this.nikeName
				},1).then(res=>{
					if(res.code==200){
						uni.showToast({
							title: '操作成功'
						});
						uni.navigateBack();
					}else{
						uni.showToast({
							title: res.message,
							icon:'none'
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #F2F3F8;
}
.page{
	padding: 30rpx 32rpx;
	box-sizing: border-box;
	.item{
		width: 686rpx;
		height: 124rpx;
		background: #FCFDFF;
		box-shadow: 0rpx 0rpx 4rpx 2rpx rgba(42,65,152,0.1);
		border-radius: 20rpx;
		padding:0 30rpx;
		box-sizing: border-box;
		color: #575A64;
		image{
			width: 40rpx;
			height: 40rpx;
		}
		.name{
			width: 100%;
			input{
				width: 100%;
			}
		}
	}
}
</style>
